<template>
  <a-modal :title="title" :width="500" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk" @cancel="handleCancel" cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button type="primary" @click="handleAdd" icon="plus"> 添加文章 </a-button>
      </div>
      <!-- table区域-begin -->
      <div>
        <draggable v-model="list" chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd">
          <transition-group>
            <div v-for="(item,i) in list" :key="i">
              <div class="sort_flex">
                <!-- <div lass="sort_flex_li">
                  <img class="sort_flex_img" :src="item.img" alt="">
                </div> -->
                <div class="sort_flex_li">
                  <p class="sort_flex_title">{{item.title}}1</p>
                </div>
                <div class="sort_flex_del">
                  <a-button type="danger" icon="delete" @click="blogSortDel(item.id)"/>
                </div>
              </div>
            </div>
          </transition-group>
        </draggable>
      </div>
      <!-- 表单区域 -->
      <blog-choose-modal ref="modalForm" @chooseBlog="chooseBlog"></blog-choose-modal>
    </a-spin>
  </a-modal>
</template>
<script>
import blogChooseModal from '@/views/blog/modules/blogChooseModal';
import draggable from 'vuedraggable';
import ApiTree from '@/api/blog/blogList';
import { Slime, crud } from '@/mixins/slime';
export default {
  mixins: [Slime],
  components: { draggable, blogChooseModal },
  data() {
    return {
      title: '排序',
      visible: false,
      TopList: [],
      HotList: [],
      SideList: [],
      type: '',
      list: [
        // {title:'',img:'',id:''}
      ],
    };
  },
  methods: {
    edit(type) {
      this.visible = true;
      this.type = type;
      if (type == 'top') {
        this.list = this.TopList;
      } else if (type == 'hot') {
        this.list = this.HotList;
      } else if (type == 'side') {
        this.list = this.SideList;
      }
    },
    //初始化
    loadData() {
      ApiTree.getIndex()
        .then(
          (res) => {
            let data = res.result;
            //top
            this.TopList = data.top.map((obj) => {
              obj = {
                id: obj.id,
                img: obj.img
                  ? obj.img
                  : require('@/assets/images/defaultdll.png'),
                title: obj.title,
              };
              return obj;
            });
            //hot
            this.HotList = data.hot.map((obj) => {
              obj = {
                id: obj.id,
                img: obj.img
                  ? obj.img
                  : require('@/assets/images/defaultdll.png'),
                title: obj.title,
              };
              return obj;
            });
            //side
            this.SideList = data.side.map((obj) => {
              obj = {
                id: obj.id,
                img: obj.img
                  ? obj.img
                  : require('@/assets/images/defaultdll.png'),
                title: obj.title,
              };
              return obj;
            });
          },
          (err) => {
            this.$message.warning('提交失败');
          }
        )
        .finally(() => {});
    },
    // 添加文章
    handleAdd() {
      this.$refs.modalForm.search(this.list);
      this.$refs.modalForm.title = '添加文章';
    },
    // 删除
    handleDelete(id) {
      let ids = [];
      ids.push(id);
      var that = this;
      ApiTree.getDelete(ids)
        .then((res) => {
          if (res.success) {
            that.$message.success('删除成功');
          } else {
            that.$message.warning(res.message);
          }
        })
        .finally(() => {
          that.loadData();
        });
    },
    //开始拖拽事件
    onStart() {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false;
    },
    //选中文章
    chooseBlog(record) {
      let blogNew = {
        title: record.title,
        img: record.img,
        id: record.id,
      };
      this.list.push(blogNew);
    },
    blogSortDel(id){
      let list = this.list
      let listNew = []
      for(let i=0;i<list.length;i++){
        if(id != list[i].id){
          listNew.push(list[i])
        }
      }
      this.list = listNew
    },
    //点击确定
    handleOk() {
      const that = this;
      let type = this.type;
      let ids = this.list.map((obj) => {
        obj = obj.id
        return obj;
      })
      let param = {
        type:type,
        ids:ids
      }
      ApiTree.saveSort(param)
        .then((res) => {
          if (res.success) {
            that.$message.success('提交成功');
            that.$emit('ok');
            that.loadData()
          } else {
            that.$message.warning(res.message);
          }
        })
        .finally(() => {
          that.close();
        });
    },
    //关闭
    handleCancel() {
      this.close();
    },
    close() {
      this.$emit('close');
      this.visible = false;
    },
  },
  created() {
    crud(ApiTree);
    this.loadData();
  },
};
</script>
<style scoped>
.sort_flex {
  margin: 10px;
  border: 1px solid #f1f1f1;
  border-radius: 10px;
  padding: 5px;
  position: relative;
}
.sort_flex_li {
  margin-right:40px ;
}
.sort_flex_img {
  width: 90px;
  height: 60px;
}
.sort_flex_title {
  padding: 10px;
  margin: 0px;
  overflow: hidden;
}
.sort_flex_del{
  position: absolute;
  top: 10px;
  right: 10px;
}
</style>